<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script>
			// 一进入就更改字体大小
			document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
		</script>
	</head>

	<body>
		<div class="swiper-container">
			<!--loading-->
			<div class="loading">
				<div class="rider">
					<img src="images/loading/rider1_.png" />
				</div>
				<div class="progress"></div>
				<div class="text"></div>
				<div class="logo"></div>
				<div class="copyright">
					@ 2015 Baidu Waimai Produced
				</div>
			</div>

			<!--welcome-->
			<div class="welcome">
				<div class="beartitle">
					<div class="hello"></div>
				</div>
				<div class="cloud"></div>
				<div class="bear-box">
					<div class="bear"></div>
					<div class="smoke"></div>
				</div>
				<div class="grass"></div>
				<div class="trees"></div>
				<div class="grass2"></div>
				<div class="rotate-btn">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="btn"></div>
				</div>
				<div class="text">长按启动，观外卖之路</div>
			</div>

			<!--lunbo-->
			<div class="waimai-container">
				<div class="swiper-wrapper">
					<!--轮播1-->
					<div class="swiper-slide page1" style="display: none;">
						<div class="title">
							<h3>生活中</h3>
							<p>经常有这种时候...</p>
							<div class="line"></div>
						</div>
						<div class="scroll-paper1" style="display: none;">
							<div class="person">
								<!--一摞纸-->
								<div class="files">
									<div class="paper1"></div>
									<div class="paper2"></div>
								</div>
							</div>
							<div class="message_box">
								<div class="text"></div>
							</div>
						</div>
						<div class="scroll-paper2" style="display: none;">
							<div class="person">
								<div class="leg1"></div>
								<div class="leg2"></div>
							</div>
							<div class="message_box">
								<div class="text"></div>
							</div>
						</div>
						<div class="scroll-paper3">
							<div class="person">
								<div class="word1"></div>
								<div class="word2"></div>
								<div class="word3"></div>
								<div class="word4"></div>
							</div>
							<div class="message_box">
								<div class="text"></div>
							</div>
						</div>
						<div class="sphere"></div>
						<!--熊-->
						<div class="bear"></div>
					</div>
					<!--轮播2-->
					<div class="swiper-slide page2" style="display: none;">
						<div class="title">
							<h3>这时候</h3>
							<p>如果有一份美味外卖...</p>
							<p>正好出现...</p>
							<div class="line"></div>
						</div>
						<div class="bg"></div>						
						<div class="bear">							
							<div class="face1"></div>
							<div class="face2"></div>
							<!--熊掌-->
							<div class="hand-left"></div>
							<div class="hand-right"></div>
						</div>						
						<div class="sphere"></div>
						<div class="table"></div>
						<div class="food"></div>						
					</div>

					<!--轮播3-->
					<div class="swiper-slide page3" style="display: none;">
						<div class="title">
							<h3>这时候</h3>
							<p>如果有一份美味外卖...</p>
							<p>正好出现...</p>
							<div class="line"></div>
						</div>
						<div class="bg"></div>
						<div class="bear"></div>
						<div class="license"></div>
						<div class="oil"></div>
						<div class="evil2"></div>
						<div class="sphere"></div>
					</div>
					<!--轮播4-->
					<div class="swiper-slide page4" style="display: none;">
						<div class="title">
							<h3>百度外卖</h3>
							<p>只做有品质的外卖...</p>
							<p>操作快捷...</p>
							<div class="line"></div>
						</div>
						<div class="bg"></div>
						<div class="bear"></div>
						<div class="card1"></div>
						<div class="card2"></div>
						<div class="card3"></div>
						<div class="sphere"></div>
					</div>
					<div class="swiper-slide page5" style="display: none;">
						<div class="title">
							<h3>无论前方</h3>
							<p>狂风，大雨，还是飘雪...</p>
							<p>始终坚持在路上...</p>
							<div class="line"></div>
						</div>
						<div class="bg"></div>
						<div class="bear-box">
							<div class="snow"></div>
							<div class="bear">
								<div class="weather"></div>
							</div>
							<div class="shadow"></div>
						</div>						
						<div class="sphere"></div>
					</div>
					<div class="swiper-slide page6" style="display: none;">
						<div class="title">
							<h3>丰富礼品</h3>
							<p>让你边吃，边省钱...</p>
							<div class="line"></div>
						</div>
						<div class="bg"></div>
						<div class="bear">
							<div class="gift-box">
								<div class="gift1"></div>
								<div class="gift2"></div>
								<div class="gift3"></div>
								<div class="gift4"></div>
								<div class="gift5"></div>
								<div class="gift6"></div>
								<div class="gift7"></div>
								<div class="gift8"></div>
								<div class="gift9"></div>
								<div class="gift10"></div>
								<div class="gift11"></div>
								<div class="gift12"></div>
							</div>
						</div>
						<div class="sphere"></div>
					</div>
					<div class="swiper-slide page7">
						<div class="title">
							<h3>所有的努力</h3>
							<p>就是为了健康、美丽的外卖...</p>
							<p>呈现给你...</p>
							<div class="line"></div>
						</div>
						<div class="bg">
							<div class="lamp"></div>
						</div>
						<div class="moto"></div>
						<div class="sphere"></div>
						<div class="bear"></div>
						<div class="share"></div>
						<div class="text">www.baidu.com</div>
					</div>
				</div>
			</div>
		</div>

		<script src="lib/swiper/swiper.min.js"></script>
		<script>
			var mySwiper = new Swiper('.waimai-container', {
				direction: 'vertical'
			});
		</script>
	</body>

</html>